<template>
    <Dropdown class="zl-dropdown" :class="{'visible': visible}"
        trigger="custom">
        <div class="zl-dropdown-box" @click="visibleMenu">
            <div class="zl-dropdown-val">
                <span class="zl-select-placeholder" v-if="selectList.length === 0">{{placeholder}}</span>
                <Tag :closable="true" v-else v-for="(sel, selIndex) in selectList" :key="selIndex" @on-close="closeTag(sel, selIndex)">{{sel[value]}}</Tag>
            </div>
            <Icon type="ios-arrow-down"></Icon>
        </div>
        <DropdownMenu slot="list" ref="menu">
            <DropdownItem v-for="menu in menus" :key="menu[value]" @click.native="selectMenu(menu)" :class="{'selected': menu.selected}">
                {{menu[value]}}
            </DropdownItem>
        </DropdownMenu>
    </Dropdown>
</template>
<script type="text/javascript">
export default {
    data () {
        return {
            visible: false,
            selectList: [],
            tag: 'zl-dropdown'
        }
    },
    props: {
        num: {
            type: Number,
            default: 2
        },
        // [{value: 1}, {value: 2}, {value: 3}]
        menu: {
            type: Array,
            default: function() {
                return []
            }
        },
        placeholder: {
            type: String,
            default: '请选择'
        },
        value: {
          type: String,
          default: 'value'
        },
        init: {
          type: Array,
          default: function() {
            return []
          }
        }
    },
    computed: {
        menus(){
            let r = []
            let selectIds = []
            this.selectList = this.init
            for (let i = 0; i < this.init.length; i++) {
              const initItem = this.init[i];
              selectIds.push(initItem[this.value])
            }
            this.menu.forEach(m => {
              if (selectIds.indexOf(m[this.value]) !== -1) {
                m.selected = true
              } else {
                m.selected = false
              }
                r.push(m)
            });
            return r
        }
    },
    mounted () {
        let vm = this
        vm.$nextTick(function () {
            document.addEventListener('click', function(event) {
                let t = event.target
                let isDrop = false
                while(t) {
                    if (t.className && typeof t.className === 'string' && t.className.indexOf(vm.tag) !== -1) {
                        isDrop = true
                        break
                    }
                    t = t.parentNode
                }
                vm.visible = false
                if (!isDrop) {
                    let zdl = document.getElementsByClassName('zl-dropdown')
                    for (let i = 0; i < zdl.length; i++) {
                        const zd = zdl[i];
                        zd.className = zd.className.replace('visible', '')
                        let dl = zd.getElementsByClassName('ivu-select-dropdown')
                        for (let i = 0; i < dl.length; i++) {
                            const d = dl[i];
                            d.style = 'display: none'
                        }
                    }
                }
            })
        })
    },
    methods: {
        // 删除已选
        closeTag(sel, index) {
            this.selectList.splice(index, 1)
            this.menus.forEach((m) => {
                if (m[this.value] === sel && m.selected) {
                    m.selected = false
                }
             })
        },
        // 显示菜单栏
        visibleMenu() {
          console.log(this.visible)
            if (this.visible) {
                this.visible = false
                this.$refs.menu.$el.parentNode.style = "display: none"
            } else {
                this.visible = true
                this.$refs.menu.$el.parentNode.style = "display: block"
            }
        },
        outsideHandle() {
            this.visible = false
            this.$refs.menu.$el.parentNode.style = "display: none"
        },
        // 选择菜单
        selectMenu(menu)  {
            if (menu.selected) {
                menu.selected = false
                this.selectList = this.selectList.filter((sel) => {
                  return sel[this.value] !== menu[this.value]
                })
            } else {
                if (this.selectList.length < this.num) {
                    menu.selected = true
                    this.selectList.push(menu)
                } else {
                  this.$Message.info({
                    content: '选择维度不能超过' + this.num + '个!',
                    duration: 1.5
                  })
                }
            }
            this.$emit('on-change', this.selectList)
        }
    }
}
</script>
<style lang="less" scoped>
.zl-dropdown-box {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    position: relative;
    background-color: #fff;
    border-radius: 1px;
    border: 1px solid #dcdee2;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    height: 32px;
    line-height: 32px;
    padding: 0 24px 0 6px;
    > .ivu-icon {
        position: absolute;
        top: 8px;
        right: 4px;
        color: #808695;
    }
    .zl-dropdown-val {
        line-height: 30px;
    }
    .ivu-tag-text {
        display: inline-block;
        vertical-align: -1px;
        max-width: 120px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}
.zl-dropdown /deep/ {
    .ivu-dropdown-item {
        position: relative;
        &.selected {
            color: rgba(45, 140, 240, 0.9);
            background: #fff;
            &::after {
                display: inline-block;
                font-family: "Ionicons";
                speak: none;
                font-style: normal;
                font-weight: normal;
                font-variant: normal;
                text-transform: none;
                text-rendering: auto;
                line-height: 1;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                vertical-align: middle;
                font-size: 24px;
                content: '\F171';
                color: rgba(45, 140, 240, 0.9);
                position: absolute;
                top: 2px;
                right: 8px;
            }
        }
    }
}
.zl-select-placeholder {
    color: #c5c8ce;
}
.zl-dropdown {
    .zl-dropdown-box {
        .ivu-icon {
            transition: all ease 0.5s;
            transform: rotate(0);
        }
    }
    .ivu-select-dropdown {
        transition: all ease 0.5s;
        min-height: 0;
        height: 0;
    }
    &.visible {
        .zl-dropdown-box {
            .ivu-icon {
                transition: all ease 0.5s;
                transform: rotate(180deg);
            }
        }
        .ivu-select-dropdown {
            transition: all ease 0.5s;
            min-height: 200px;
        }
    }
}
</style>
